<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格-Vue</title>
</head>
<style type="text/css">
    .active {
        color: black;
        background-color: #87ceeb;
        border: none;
        outline: none;
    }
    
    th {
        position: relative;
    }
    
    .topArrow {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid black;
        top: 20px;
        right: 3px;
    }
    
    .lowArrow {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid black;
        top: 35px;
        right: 3px;
    }
    
    .borderActive {
        border-color: red;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
    }
</style>

<body>
    <div id="app">
        <button>添加一条新的访客信息</button>
        <button @click="delChoose">删除选中</button>
        <label>全选功能<input type="checkbox" v-model:checked="allChecked" @change="allController"/></label>
        <button @click="reverse">反选</button>
        <hr/>
        <table border="1" cellspacing="0" cellpadding="20">
            <tr>
                <th>
                    <span>序列号</span>
                    <span class="topArrow " @click="infoSort('numUp')" :class="arrowClass=='numUp'&& 'borderActive'"></span>
                    <span class="lowArrow" @click="infoSort('numDown')" :class="arrowClass=='numDown'&& 'borderActive'"></span>
                </th>
                <th>姓名</th>
                <th>

                    <span>年龄</span>
                    <span class="topArrow" @click="infoSort('ageUp')" :class="arrowClass=='ageUp' && 'borderActive'"></span>
                    <span class="lowArrow" @click="infoSort('ageDown')" :class="arrowClass=='ageDown' && 'borderActive'"></span>

                </th>
                <th>操作</th>
                <th>选择</th>
            </tr>
            <template v-for="(item,index) in infoArr">
                <tr :key="item.id ">
                    <th>{{item.id}}</th>
                    <th>{{item.name}}</th>
                    <th>{{item.age}}</th>
                    <th><button @click="delItem(item.id)">删除</button></th>
                    <th><input type="checkbox" v-model:checked="item.isChecked"/></th>
                </tr>
            </template>
            <!--<template v-for="(item,index) in infoArr.splice(0,5) ">
                <tr >
                    <th>{{(index+1).toString().padStart(2,0)}}</th>
                    <th>{{item.name}}</th>
                    <th>{{item.age}}</th>
                    <th><button>删除</button></th>
                    <th><input type="checkbox" v-model:checked="item.isChecked"/></th>
                </tr>
            </template>-->



        </table>
    </div>

</body>
<script src="./vue-2.4.0.js "></script>
<script>
    new Vue({
        el: "#app",
        data: {
            arrowClass: "numUp",
            allChecked: false, //全选框的初始事件
            infoArr: [{
                name: '胡杭',
                age: 16,
                isChecked: false,
                id: "01 ",
            }, {
                name: '胜明',
                age: 22,
                isChecked: false,
                id: "02 ",
            }, {
                name: '军毅',
                age: 21,
                isChecked: false,
                id: "03 ",
            }, {
                name: '晓华',
                age: 13,
                isChecked: false,
                id: "04 ",
            }, {
                name: '盛聪',
                age: 23,
                isChecked: false,
                id: "05 ",
            }, {
                name: '侦剑',
                age: 32,
                isChecked: false,
                id: "06 ",
            }, {
                name: '红翔',
                age: 25,
                isChecked: false,
                id: "07 ",
            }, {
                name: '超维',
                age: 18,
                isChecked: false,
                id: "08 ",
            }, {
                name: '士琪',
                age: 22,
                isChecked: false,
                id: "09 ",
            }, {
                name: '艳华',
                age: 20,
                isChecked: false,
                id: "10 ",
            }, ],
        },
        methods: {
            //排序
            infoSort(rule) {
                this.arrowClass = rule;
                switch (rule) {
                    case 'numUp': // 序列号从小到大排序
                        this.sortRule = 'a.id - b.id';
                        break;
                    case 'numDown': // 序列号从大到小排序
                        this.sortRule = 'b.id - a.id';
                        break;
                    case 'ageUp': //年龄从小到大升序
                        this.sortRule = 'a.age - b.age';
                        break;
                    case 'ageDown': // 年龄从大到小 降序
                        this.sortRule = 'b.age - a.age';
                        break;
                }
                this.infoArr.sort((a, b) => {
                    return eval(this.sortRule);
                });
            },
            // 全选功能
            allController() {
                this.infoArr.forEach(item => {
                    // 每一个单选框的状态都和全选框按钮的状态保持一致
                    item.isChecked = this.allChecked;
                });
            },


            //删除选中
            delChoose() {
                this.infoArr = this.infoArr.filter(item => {
                    return !item.isChecked;
                });
            },
            //一键删除
            delItem(id) {
                this.infoArr = this.infoArr.filter(item => {
                    return item.id != id;
                })
            },
            //反选
            reverse() {
                this.infoArr.forEach(item => {
                    item.isChecked = !item.isChecked;
                });

            },
        },
        watch: {
            infoArr: {
                handler: function() {
                    localStorage.setItem('infoArr', JSON.stringify(this.infoArr));
                    localStorage.setItem("arrowClass ", this.arrowClass);
                    localStorage.setItem('sortRule', this.sortRule);
                    this.allChecked = this.infoArr.every(item => {
                        return item.isChecked;
                    });
                },
                deep: true,
            },
        },
        created() {
            if (localStorage.getItem('infoArr')) {
                this.$data.infoArr = JSON.parse(localStorage.getItem('infoArr'));
                this.$data.arrowClass = localStorage.getItem("arrowClass ");
                this.$data.sortRule = localStorage.getItem('sortRule');
            }
        },

    });
</script>

</html>